<template>
	<view class="list">
		<u-navbar :placeholder="true" title="档案列表" @leftClick="leftClick" :autoBack="false"></u-navbar>
		<view class="process">
			<u-steps :current="current" inactiveColor="#b0b0b0">
				<u-steps-item title="选择服务"></u-steps-item>
				<u-steps-item title="选择来访者"></u-steps-item>
				<u-steps-item title="提交订单"></u-steps-item>
				<u-steps-item title="确认支付"></u-steps-item>
			</u-steps>
		</view>
		<view class="container" :style="{ height: domHeight }">
			<view class="scrollWrap">
				<z-paging :fixed="false" ref="paging" v-model="list" @query="queryList">
					<view class="wrap">
						<view class="table">
							<view v-for="item in list" :key="item.id"  @click="selectItem(item.id)" class="list-item">
								<view class="list-item-left" @click="handleSel(item)">
									<u-icon v-show="item.id !== selId" :name="item.id === selId?'checkmark-circle-fill':'minus-circle'" color="#5c83fd" size="24"></u-icon>
									<view  class="name">{{ item.recordName ? item.recordName : '' }}</view>
									<view class="number">{{ item.phoneNumber ? item.phoneNumber : '' }}</view>
								</view>
								<view class="list-item-right"  @click.stop="goDetail(item)">
									<view>查看</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
		<view class="btn">
			<view @click="addVistor">新增档案</view>
			<view @click="submit">确认选择</view>
		</view>
	</view>
</template>

<script>
import { consultationRecordList } from '@/api/consult/index.js';
export default {
	data() {
		return {
			domHeight: '',
			selId: 0,
			list: [],
			id: 0,
			current: '1',
			
		};
	},
	onShow() {
		this.$refs.paging.reload();
	},
	methods: {
		queryList(pageNum, pageSize) {
			const querys = {
				pageNum,
				pageSize
			};
			consultationRecordList(querys).then((res) => {
				let list = [...res.rows];
				this.$refs.paging.completeByTotal(list, res.total);
			});
		},
		handleSel(item){
			this.selId = item.id;
		},
		goDetail(item) {
			// console.log(item);
			this.$tab.navigateTo(`/subset/pages/consult/visitorProfile/visitorProfileInfo?id=${item.id}`);
		},
		selectItem(id) {
			this.selId = id;
		},
		addVistor() {
			this.$tab.navigateTo(`/subset/pages/consult/visitorProfile/visitorProfile`);
		},
		submit() {
			if (!this.selId) {
				uni.$u.toast('请选择要绑定的档案');
				return;
			}
			uni.setStorageSync('recordId', this.selId);
			
			const consultData = JSON.parse(uni.getStorageSync('consultData'))
			this.$tab.redirectTo(`/subset/pages/consult/consultOrder/consultOrder?id=${consultData.experId}`)
			// uni.navigateBack();
			// if (this.fromPage === 'subset/pages/consult/consultOrder/consultOrder') {
			// 	this.$tab.redirectTo(`/subset/pages/consult/consultOrder/consultOrder?id=${this.id}`);
			// 	uni.navigateBack();
			// }else if(this.fromPage === 'subset/pages/consult/visitorProfile/visitorProfile') {
			// 	uni.navigateBack({
			// 		delta: 2
			// 	});
			// }
		},
		leftClick() {
			// if (this.fromPage === 'subset/pages/consult/consultOrder/consultOrder') {
			// 	this.$tab.redirectTo(`/subset/pages/consult/consultOrder/consultOrder?id=${this.id}`);
			// } else if (this.fromPage === 'subset/pages/consult/visitorProfile/visitorProfile') {
			// 	uni.navigateBack({
			// 		delta: 2
			// 	});
			// }
			// const consultData = JSON.parse(uni.getStorageSync('consultData'))
			uni.navigateBack();
			// this.$tab.redirectTo(`/subset/pages/consult/consultOrder/consultOrder?id=${consultData.experId}`)
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		let statusBarHeight = systemInfo.statusBarHeight || 20;
		// 示例计算公式（具体需根据组件实现调整）
		const height = statusBarHeight + 44 + 'px'; // 状态栏高度 + 导航栏内容高度
		this.domHeight = `calc(100% - ${height} - 150rpx - 166rpx)`;
	}
};
</script>

<style scoped lang="scss">
.list {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgb(232, 234, 239);
	.process {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #fff;

		::v-deep .u-steps-item__wrapper {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: #fafafa;
		}

		::v-deep .u-steps-item__wrapper__circle__text {
			color: #fff !important;
		}
		::v-deep .u-steps-item__wrapper__circle {
			line-height: 20px;
		}
	}
	.container {
		width: 100%;
		background-color: rgb(232, 234, 239);
		padding: 10rpx 18rpx;
		box-sizing: border-box;
		border-radius: 0 0 10rpx 10rpx;
		border-radius: 10rpx;
		overflow: hidden;
		::v-deep .z-paging-content-fixed {
			width: 100%;
			height: 100%;
		}

		.scrollWrap {
			width: 100%;
			height: 100%;
			background-color: #fff;
			// height: calc(100% - 166rpx);
			.wrap {
				width: calc(100% - 60rpx);
				height: calc(100% - 40rpx);
				margin: 20rpx auto;

				border-radius: 10rpx;

				.table {
					width: 100%;
					// padding: 20rpx;
					// box-sizing: border-box;
					background-color: #fff;
					border-radius: 10rpx;
					.list-item {
						width: 100%;
						height: 100rpx;
						border-bottom: 1rpx solid #e3e3e3;
						display:flex;
						align-items: center;
						justify-content: space-between;
						.list-item-left{
							width: calc(100% - 80rpx);
							display:flex;
							height: 100%;
							align-items: center;
							.name{
								width: 50%;
								padding-left: 50rpx;
								box-sizing: border-box;
								font-size: 30rpx;
								color: #000;
								font-weight: bold;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}
							.number{
								width: 40%;
								font-size: 30rpx;
								color: #585858;
							}
						}
						.list-item-right{
							width: 80rpx;
							text-align: center;
							color: #00aaff;
						}
					}
				}

				

				
			}
		}
	}

	.btn {
		width: 100%;
		height: 166rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 80rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		> view {
			width: 45%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #ffffff;
			background: #5c83fd;
			border-radius: 42rpx;
		}
		> view:nth-child(1) {
			color: #000 !important;
			background: #ebebeb !important;
		}
	}
}
</style>
